* {
  margin: 0;
  padding: 0;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

:root {
  --c1: hsl(219, 79%, 66%);
  --c2: #d733b3;
  --c3: #43256b;
  --c4: #af308f;
  --c5: #f33434;
  --c6: #e3e345;
  --c7: #f97246;
}

.wrapper {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  perspective: 300px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.wrapper::before {
  content: "";
  position: absolute;
  top: 55%;
  bottom: 0;
  inset-inline: 0;
  background: linear-gradient(var(--c3), var(--c2));
}
.wrapper .grid {
  position: absolute;
  width: 300vw;
  height: 600px;
  left: -100vw;
  top: 55vh;
  transform-style: preserve-3d;
  background: repeating-linear-gradient(var(--c1), var(--c1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, var(--c1), var(--c1) 1px, transparent 1px, transparent 20px);
  transform: translate3d(0, 0, -600px) rotateX(90deg);
  transform-origin: 50% 0;
  animation: move 20s linear infinite;
}
.wrapper .grid:nth-child(2) {
  animation-delay: -10s;
}
.wrapper .g-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 43%;
  right: 0;
  background: radial-gradient(circle at 50% 100%, var(--c5), var(--c4));
  transform-style: preserve-3d;
  z-index: 1;
  -webkit-box-reflect: below -50px linear-gradient(rgba(255, 255, 255, 0.1), transparent);
}
.wrapper .g-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.5) 4px, rgba(0, 0, 0, 0.5) 5px);
  z-index: 1;
}
.wrapper .g-bg .g-sum {
  position: absolute;
  top: 10%;
  bottom: 20%;
  inset-inline: 10%;
  background: radial-gradient(circle at 50% 100%, var(--c7), var(--c6) 55%, transparent 55.1%, transparent);
  -webkit-mask: linear-gradient(to top, #000 0, #000 10%, transparent 10%, transparent 13%, #000 13%, #000 20%, transparent 20%, transparent 22%, #000 22%, #000 35%, transparent 35%, transparent 36%, #000 36%, #000 100%);
          mask: linear-gradient(to top, #000 0, #000 10%, transparent 10%, transparent 13%, #000 13%, #000 20%, transparent 20%, transparent 22%, #000 22%, #000 35%, transparent 35%, transparent 36%, #000 36%, #000 100%);
}
.wrapper .g-mountain {
  position: absolute;
  inset-inline: 0;
  top: 14%;
  bottom: 42%;
  overflow: hidden;
  z-index: 10;
}
.wrapper .g-mountain::before, .wrapper .g-mountain::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 15vw;
  background-color: #12273e;
  transform: rotate(-45deg);
  box-shadow: -3vw -3vw, 5vw 5vw, 10vw 10vw 0 3vw, 15vw 20vw 0 4vw, 25vw 22vw 0 6vw, 25vw 30vw 0 11vw, 38vw 36vw 0 1vw, 41vw 39vw 0 3vw, 45vw 45vw 0 2vw, 52vw 52vw 0 4vh, 55vw 55vw 0 1.5vw, 61vw 61vw 0 0.5vw, 68vw 68vw 0 0;
}
.wrapper .g-mountain::before {
  filter: url("#filter");
  z-index: 2;
  top: 78%;
  color: #12273e;
}
.wrapper .g-mountain::after {
  left: 1%;
  top: 70%;
  color: #1d2f50;
  z-index: 1;
  filter: url("#filter2");
}

@keyframes move {
  0% {
    transform: translate3d(0, 0, -600px) rotateX(90deg);
  }
  100% {
    transform: translate3d(0, 0, 600px) rotateX(90deg);
  }
}